@height: 32px;
@color: #00c9b7;

.select-animation() {
  transition: all 0.3s;
}

.select-container {
  @apply text-left relative;
  height: @height;

  .select-title {
    @apply w-full flex items-center justify-between border border-solid rounded cursor-pointer text-sm px-5;
    border-color: #eee;
    height: @height;
    line-height: @height;
    color: #aaa;
    height: 30px;

    &.disabled {
      cursor: not-allowed;
      background: #f5f5f5;
    }

    .select-title-text {
      @apply flex items-center flex-nowrap;

      .title-text-item {
        @apply shrink-0 text-xs h-6 rounded mr-1 px-2 flex items-center;
        background-color: #f4f4f5;
        border: 1px solid #e9e9eb;
        color: #909399;

        & > span:first-child {
          @apply mr-1;
        }

        & > img {
          @apply rounded-50;
          width: 14px;
          height: 14px;

          &:hover {
            border: 1px solid #ccc;
          }
        }
      }
    }

    .select-title-arrow {
      width: 14px;
      height: 14px;
      .select-animation();

      &.activeEnter {
        transform: rotate(0deg);
      }

      &.activeLeave {
        transform: rotate(180deg);
      }
    }
  }

  .select-options-items {
    @apply absolute left-0 top-8 right-0 z-1 p-3 bg-white rounded flex flex-col;
    font-family: PingFang SC;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
    height: 248px;

    & > ul {
      list-style: none;
    }

    &.select-options-items-flex {
      cursor: not-allowed;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      color: #999;

      & > img {
        @apply h-fit;
        width: 30px;
      }
    }

    .options-top {
      @apply flex-1 flex;

      div {
        @apply h-full;

        &.left {
          width: 68px;
          margin-right: 10px;

          p {
            @apply h-8 text-center leading-8 text-sm rounded cursor-pointer text-main-assist;
            width: 68px;

            &.active {
              @apply text-theme;
              background: #ffece1;
            }
          }
        }

        &.right {
          @apply flex-1 flex flex-col;
          border-bottom: 1px solid #eee;
          .nullBox {
            @apply w-full h-full flex flex-col items-center pt-10 mt-1;
          }
          .filter {
            @apply h-8 rounded flex items-center;
            width: 146px;
            border: 1px solid #d8d8d8;

            input {
              @apply h-full text-sm;
              text-indent: 10px;
              width: 120px;
            }

            .search {
              @apply w-4 h-4;
            }
          }

          .selectBox {
            @apply flex-1 overflow-auto mt-1;

            .select-item {
              @apply cursor-pointer font-normal text-main flex items-center px-3 rounded text-sm text-main;
              height: @height;
              line-height: @height;
              font-family: PingFang SC;

              &.active {
                @apply text-theme font-semibold rounded;
                background: #ffece1;

                .checked {
                  @apply bg-theme;

                  &::after {
                    @apply absolute w-1 h-2 border-solid;
                    left: 5px;
                    content: '';
                    top: 2px;
                    border-color: white;
                    border-width: 0 2px 2px 0;
                    transform: scale(0) rotate(45deg);
                    animation: ripple 0.2s ease forwards;
                  }
                  @keyframes ripple {
                    0% {
                      transform: scale(0) rotate(45deg);
                    }
                    25% {
                      transform: scale(0.25) rotate(45deg);
                    }
                    50% {
                      transform: scale(0.5) rotate(45deg);
                    }
                    75% {
                      transform: scale(0.75) rotate(45deg);
                    }
                    100% {
                      transform: scale(1) rotate(45deg);
                    }
                  }
                }
              }

              &:hover {
                .select-animation();
                background: #f7f8fa;
              }

              .checked {
                @apply rounded relative;
                width: 14px;
                height: 14px;
                border: 1px solid #f7ece5;
                background: #fcf3ed;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .options-bottom {
      @apply h-6 mt-3 flex justify-between text-xs items-center w-full;

      .btn {
        @apply text-sm text-main-assist;
        @apply h-6;
        width: 48px;
        background-color: #eeeeee;

        &.btnSure {
          @apply bg-theme text-white;
          margin-left: 10px;
        }
      }
    }
  }
}
